آخرین مطالب
امکانات وب
با درود به همه دوستان با قسمت دهم آموزش طراحي سايت از پايه در خدمتتون هستم و اميدوارم اين مقاله هم مانند مقاله هاي گذشته بازخورد هاي خوبي داشته باشد .
Background-color و گزينش گر متني و سبک دهي گروهي صحبت خواهم کرد .
تا اينجاي کار به چند مثال ساده اما کاربردي با CSS براي استفاده در وب سايت نگاهي انداختيم. براي استايل دهي خصوصيات بسيار زيادي وجود دارد که البته طراحی وب سایت من قصد دارم آنها را اينجا ليست کنم
Color
همانطور که قبلا هم ديديد براي رنگ دادن به عناصر استفاده مي شود.
Background-color
به دو صورت مقدار دهي مي شود يا نام رنگ (blue, red, green,..) يا با اعداد دسيمال، مانند: #3acbef
Font-family
با اين خصيصه هر فونتي را که بخواهيد مي توانيد به متون سايت خود اعمال کنيد،
Font-size
مقدار دهي آن مي تواند مثل يکي از گزينه هاي زير باشد:
1- نام هاي آماده براي سايز دادن به فونت ؛
• X-small
• Small
• Large
• Xx-large
2- فونت دهي به صورت نسبي؛
• به صورت درصدي : %120
• به صورت 1.2em : em
3- فونت دهي به صورت مطلق؛
• به صورت pixel ، مانند: px12
• به صورت point، مانند: pt12
قطعاً زمانيکه بخواهيم اين امکان را به خوانندگان مطالب وب سايتمان بدهيم که با تغيير سايز صفحه مرورگر خود ( مثلا سايز %150 به جاي %100) بتوانند سايز فونت متناسب با آن را ببينند فونت دهي به صورت نسبي را مد نظرمان قرار مي دهيم.
براي مطالعه بيشتر، اين مقاله را مطالعه نماييد.
Font-weight
ضخامت فونت است که به دو صورت normal يا bold مقدار دهي مي شود.
Font-style
سبک فونت است که به دو صورت normal يا italic مقدار دهي مي شود.
Text-decoration
مدل دهي به متن به صورت: none, underline, overline و يا line-through است.
سپس با استايل هاي مختلفي که در بالا ياد گرفتيد استايل هاي مختلفي را بسازيد.
تمامي موارد بالا را مي بايست در مرورگر خود تست کنيد تا با آنها آشنا شويد ولي حالا بيائيد استايل دهي بيشتري برروي عناصر موجود در سايتمان اعمال کنيم.
- ابتدا فايل about.html را باز کنيد (در تمرين هاي قبلي ساخته شده است)
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About Bubble Under: who we are, what this site is
for</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
splash!</p>
</div>
</div> <!-- end of header div -->
<div id="bodycontent">
<h2>About Us</h2>
the south-west UK who meet up for diving trips in the
summer months when the weather is good and the bacon
rolls are flowing. We arrange weekends away as small
<p>Although we're based in the south-west, we don't stay on
our own turf: past diving weekends away have included
trips up to Scapa Flow in Scotland and to Malta's
numerous wreck sites.</p>
<p>When we're not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse,
eh?).</p>
</div> <!-- end of bodycontent div -->
پاراگراف زير را پيدا کرده و تگ em را که جهت نمايش بيشتر يا به عبارتي تاکيد بهتر بر روي آن کلمه بکار رفته است را اضافه کنيد.
<p>And when we're not diving, we often meet up in a local pub
to talk about our recent adventures (<em>any</em> excuse,
eh?).</p>
design-web-101.jpg
- حالا فايل css خود را باز کرده و استايل زير را به آن اضافه نماييد.
em {
Font-style: normal;
Text-transform:uppercase;
{
حالا فايل css را ذخيره کرده، سپس صفحه نمايش خود را refresh نماييد، تصويري که مشاهده مي کنيد مي بايست مشابه عکس زير باشد.
design-web-102.jpg
مشابه اين مثال را مي توانيد در منوي سمت راست خدمات طراحي سايت وبسکالا مشاهده کنيد. اگر از تگ em در متون انگليسي استفاده نماييم استايل آن به صورت پيش فرض italic خواهد بود، (مانند مثال زير) که اگر بخواهيد استايل آم متن هم مانند ساير متون در آم پاراگراف باشد به آن استايل normal مي دهيم و اگر بخواهيم با حروف بزرگ ( به جز زبان فارسي )نمايش يابد از uppercase استفاده مي کنيم.
نکته :
برخي از تگ هاي و عناصر HTML هستند که به مرور زمان با تگهاي ديگري جايگزين مي شوند و از استفاده از آنها صرف نظر مي گردد، به عنوان مثال تا چند وقت پيش تگي که براي bold کردن يا ضخيم کردن متون يه کار مي رفت <b> بود که به جاي آن هم اکنون از تگ strong استفاده مي شود. اهميت اين موضوع زماني است که افراد نابينا براي کار با وب سايت ها از نرم افزارهايي استفاده ميکنند که بجاي نمايش صفحات وب آن را براي کاربر خود مي خوانند که به اصطلاح به آن ها screen reader مي گويند.در اينجاست که آنها در هنگام خوانندن مطلب متني را که با تگ em مشخص شده است را مهمتر ميدانند تا متني را که درون تگ i قرار گرفته همچنين موتورهاي جستجو در گوگل به متني که با تگ strong ضخيم شده است بيشتر توجه ميکنند و به عنوان متن مهمي که در يک متن استفاده شده است مي نگرند تا به متني که با تگ b ضخيم شده باشد.
Body{
Font-family: verdana, Helvetica, Arial, San-serif;
}
P{
Font-size: small;
Color: navy;
}
خط بالا به ما ميگه که هر تگ p که در صفحه بود استايل بالا را بگيرد.
اما دليل ما از به کاربردن اين مثال براي اين است که مي خواهيم پاراگرافي را متمايز از ساير متون وب سايتمان کنيم و آن اولين پاراگراف متن ما است. حالا براي متمايز کردن اين پاراگراف براي آن به صورت زير عمل مي کنيم:
<div id="tagline">
<p>Diving club for the south-west UK - let's make a splash! </p>
< /div>
متن درون اين تگ از خصوصيات گرفته شده ساير متون پيروي نمي کند و در عوض خصوصيت مربوط به div خود را مي گيرد که شامل خصيصه خاصي است که با id اي به نام tagline تعريف شده است که اين خصوصيت تنها به براي همين تگ خواهد بود. حالا براي تعريف درون فايل css براي آن خصوصيات زير را تعريف مي کنيم:
#tagline p {
Font-style: italic;
Font-family: Georgia, Times, Serif;
}
فايل css را ذخيره کرده و سپس پنجره مرورگرتان را refresh کنيد . صفحه شما نيز مي بايست مانند عکس زير باشد.
design-web-103.jpg
براي هر متني که درون تگ p قرار گرفته باشد و id آن tagline باشد، نوع فونت آن italic و از نوع Georgia يا Times و يا Serif خواهد بود.
يعني هر تگ p که داخل آي دي tagline قرار گرفته است و نه p هاي ديگر .
علامت # در CSS به عنصري اشاره مي کند که طراحی وب سایت شامل يک Id خاص با خصوصيات مربوط به خود است. در مورد Id در قسمت هاي جلوتر به طور کامل خواهيم پرداخت.
گزينشگر متني
#tagline p يک گزينشگر متني است، در اينجا چند مثال ديگر برايتان مطرح مي کنم.
Navigation a{#
Text-decoration: none;
}
براي هر تگ a اي که درون تگي با navigation =id است، آن لينک فاقد زير خط در هنگام کليک کردن آن لينک خواهد بود.
درون تگي که id footer دارد، تمامي متون داراي %150 فاصله ميان خطوط خواهند بود.
h1 strong {
color: red;
}
هر تگ strong ي که درون تگ h1 قرار گيرد رنگ آن قرمز خواهد بود.
سبک دهي گروهي
گاهي اوقات مي بينيد که در هنگام استايل دهي يکسري از تگ ها هستند که خصوصيات يکساني دارند اما در فايل CSS براي هر يک از آنها کلاس و يا تگ جداگانه اي در نظر گرفته شده مثلا:
h1 {
color: yellow;
background-color: black;
}
h2 {
color: yellow;
background-color: black;
}
h3 {
color: yellow;
background-color: black;
}
h1, h2, h3 {
color: yellow;
background-color: black;
}
توجه داشته باشيد که براي جداکردن تگ ها از همديگر از کاراکتر ( ,) کاما ، استفاده کرديم که اين علامت را مي توانيد به معناي يا تعبير کنيد.
حالا بياييد تا در پروژه مان دسته بندي کردن عناصر را انجام دهيم. ما در پروژه مان هنوز از تگ h3 استفاده نکرده ايم اما به زودي اين کار را خواهيم کرد.
فايل css تان را با اضافه کردن css زير به انتهاي آن ويرايش کنيد.
h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
color: white;
}
حالا فايل css را ذخيره کرده و پنجره مرورگر خود را ويرايش نماييد تا تصويري چون عکس زير را ببينيد.
design-web-104.jpg
يک سوال ؟
به مثال زير دقت کنيد
h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}
h3 {
color: red;
}
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت, طراحی سایت, طراحی وب, نویسنده : zahra webdesign23 بازدید : 308 تاريخ : دوشنبه 21 مرداد 1392 ساعت: 16:52
قبلاً گفتيم که برگه ها براي نمايش يک سري اطلاعات ايستا به کار مي روند که تغيير نمي کنند. به همين دليل از آنها براي ساخت صفحه تماس با ما و يا درباره ما استفاده مي شود. حال در اين نوشته با نحوه افزودن برگه جديد در وردپرس آشنا مي شويد و مي خوانيد که چگونه بايد مشخصات طراحی وب سایت يک برگه را تعيين کرد و سپس آن را منتشر نمود.
براي اضافه کردن يک صفحه به برگه هاي سايت وردپرس، دو راه پيش رو داريد. اول اين که از صفحه مديريت هم? برگه ها، روي دکمه “افزودن برگه” کليک کنيد. يا اينکه از هر جاي پيشخوان وردپرس که باشيد از فهرست سمت راست به اين مسير برويد: برگه ها > افزودن برگه
صفحه افزودن برگه جديد در وردپرس
افزودن برگه جديد در وردپرس
عمده کاري که بايد انجام دهيد اين است که يک عنوان براي صفحه و همچنين محتويات آن را وارد کنيد. مثلاً اگر يک صفحه براي توضيحات در مورد خودتان مي خواهيد بسازيد، بهتر است نام صفحه را “درباره ما” و در بخش ويرايش، توضيحات خود را بنويسيد و عکس و ديگر محتويات صفحه را وارد کنيد، و در آخر بروي دکمه “انتشار” کليک کنيد. البته گزينه هاي ديگري در اين صفحه براي پر کردن وجود دارد که به آنها هم اشاره خواهم کرد. در مورد نحوه ويرايش نوشته ها و دکمه هاي افزودن پرونده چندرسانه اي در نوشته “ويرايش متن نوشته وردپرس” توضيحات کامل داده شده است.
علاوه بر انتشار يک برگه، مي توانيد آن را به صورت پيش نويس درآوريد. براي اينکار در عوض اينکه بروي انتشار کليک کنيد، بايد بروي “ذخيره پيش نويس” کليک کنيد. و از طريق همين جعبه انتشار مي توان، تاريخ انتشار نوشته را براي زمان آينده تنظيم نمود، تا سر موعد مقرر برگه شما منتشر شود. حتي مي توانيد بروي برگه رمز بگذاريد که فقط بازديدکنندگاني که داراي رمزعبور هستند بتوانند برگه را روءيت کنند.
در جعبه صفات برگه دو ويژگي را مي توانيد براي برگه خود تعيين کنيد. برگه ها را مي توانيد به صورت سلسله مراتبي بسازيد. يعني يک برگه زير مجموعه يک برگه ديگر باشد. درست مثل دسته بندي نوشته هاي سايت. براي اينکار از فهرست پايين افتادني مادر، برگه مادر يا والد را انتخاب کنيد. در جعبه چيدمان هم شما بايد ترتيب برگه ها را با استفاده از شماره تعيين کنيد، که کدام يک اول و کداميک آخرين برگه باشد.
تا اينجا تقريباً به تمام نکاتي که بايد در هنگام ساخت يک صفحه مد نظر قرار دهيد اشاره کرديم. ولي خود صفحه افزودن برگه وردپرس، داراي تنظيماتي است که از بالا سمت چپ از زبانه تنظيمات قابل دسترس است. بروي اين زبانه کليک کنيد تا يک بخش براي شما باز شود. از اين بخش شما قادريد جعبه هايي از صفحه را ظاهر يا پنهان کنيد، که معمولاً چهار گزينه آخري غير فعال است. مثلاً براي وارد کردن يک زمينه دلخواه اول بايد از اينجا آن را فعال کنيد و سپس در جعبه اي که به همين نام برايتان باز مي شود، زمينه دلخواه خود را تنظيم کنيد. يا براي گفتگو، نامک و نام نويسنده هم همين کار را انجام دهيد.
در افزودن برگه دقت کنيد که برگه هاي واجب را به وردپرس اضافه کنيد و از زياده روي در اين کار بپرهيزيد.
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت, طراحی سایت, طراحی وب, نویسنده : zahra webdesign23 بازدید : 227 تاريخ : چهارشنبه 16 مرداد 1392 ساعت: 13:57